import { Suspense } from 'react';
import { useLocation, useNavigate, useRoutes } from 'react-router-dom';
import './App.scss';
import { routes } from './Router';
import {
  AppOutline,
  ShopbagOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'


function App() {
  let navigate = useNavigate()
  let location = useLocation()
  // console.log(location.pathname);

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/car',
      title: '购物车',
      icon: <ShopbagOutline />,
    },
    {
      key: localStorage.getItem('token') ? '/my' : '/login',
      title: localStorage.getItem('token') ? '我的' : '登录',
      icon: <UserOutline />,
    },
  ]
  const getpath = tabs.find(item => item.key === location.pathname)
  return (
    <div className="App">
      <Suspense fallback={<div>loading</div>}>
        {useRoutes(routes)}
      </Suspense>
      <TabBar style={{ display: getpath ? 'block' : 'none' }} activeKey={location.pathname} onChange={(value) => navigate(value)} className='nav' >
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default App;
